<template>
  <div class="right-item">
    <div class="content" style="padding-top: 50px">
      <div class="thumb">
        <el-row :gutter="10" type="flex" justify="center">
          <el-col :span="12">
            <img
              src="http://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1551343984.14546114.jpg?thumb=1&w=250&h=250"
              alt="" width="160" height="160">
          </el-col>
        </el-row>

        <!--            名称-->
        <el-row :gutter="10" type="flex" justify="center">
          <el-col :span="24" style="text-align: center" class="item-name">
            <h3>{{name}}</h3>
          </el-col>
        </el-row>
        <!--           介绍-->
        <el-row :gutter="10" type="flex" justify="center">
          <el-col :span="24" style="text-align: center" class="item-introduce">
            {{introduce}}
          </el-col>
        </el-row>
        <!--            价格-->
        <el-row :gutter="10" type="flex" justify="center">
          <el-col :span="24" style="text-align: center" class="item-money">
            {{money}} 元
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightItem',
  data () {
    return {

    }
  },
  props: {
    name: {
      type: String,
      default: () => {
        return ''
      }
    },
    introduce: {
      type: String,
      default: () => {
        return ''
      }
    },
    money: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped lang="scss">
  .right-item {
    background: #ffffff;
    height: 390px;
  }

  .item-name {
    color: #212121;
    padding-top: 10px;
    font-size: 14px;
  }

  .item-introduce {
    color: #b0b0b0;
    padding-top: 15px;
    font-size: 12px;
  }

  .item-money {
    color: #ff6709;
    padding-top: 5px;
  }
</style>
